<template>
  <view class="repair-wrap">
      <!-- 增加业主申请 -->
    <view class="repair-box u-p-40 u-p-l-30 u-p-r-30" style='padding-top: 0px!important;'>
          <view class="header-form" style='margin-top: 5px;'>
            <view class="header-li">
              <view class="header-name"><h4 style="width: 100px">理赔名称</h4></view>
			  <input class="uni-combox__input" style='height: 48px;width: 78%;' type="text" placeholder="请输入理赔名称" v-model="addlnsura.ins_name"/>
            </view>

            <view class="header-li">
              <view class="header-name"><h4 style="width: 100px">理赔类型</h4></view>
              <picker @change="handlerCompany" :value="indexss" :range="lnsTest" range-key="lnsTest_name">
                <view class="form-select">{{lnsTest[indexss].lnsTest_name}}</view>
              </picker>
            </view>

			<view class="header-li">
			  <view class="header-name"><h4 style="width: 100px">选择时间</h4></view>
			  <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
			    <view class="uni-input form-select">{{addlnsura.event_time?addlnsura.event_time:'请选择事件发生日期'}}</view>
			  </picker>
			</view>

           <!-- <view class="header-li">
              <view class="header-name"><h4 style="width: 100px">保险金额</h4></view>
			  <input class="uni-combox__input" style='height: 48px;width: 78%;' type="text" placeholder="请输入保险金额" v-model="addlnsura.ins_money"/>
            </view> -->

            <view class="header-li">
              <view class="header-name"><h4 style="width: 100px">要求金额</h4></view>
							<input 
								@input='handleMoney' 
								class="uni-combox__input" 
								style='height: 48px;width: 78%;' 
								type="number" 
								placeholder="请输入您要求赔付金额" 
								v-model="addlnsura.tr_money" />
            </view>
        </view>
          <view style="padding: 20px 0;border-bottom: 16rpx solid #f9f9f9;">
			    <view class="header-name"><h4 style="width: 100px;padding: 0 0 15px 0;">理赔原因</h4></view>
				<view class='guar-text'>
				  <textarea maxlength='-1' v-model="addlnsura.ins_cer" type="textarea" placeholder="请详细描述理赔原因" />
				</view>
          </view>
          <view class="header-li">
            <view class="header-name"><h4 style="width: 100px">免赔额承担方</h4></view>
            <picker @change="bindPickerChange" :value="indexYingHa" :range="yingHangLei" range-key="yingHang_name">
              <view class="form-select">{{yingHangLei[indexYingHa].yingHang_name}}</view>
            </picker>
          </view>
		  <text style='display: flex;color: #999;margin-top: -10px;'>提示：所填要求金额低于免赔额度只能由物业公司来承担</text>
          <view class="header-li">
            <span style="color: #666666 ;">免赔金额为&nbsp;<text style='color:#f5a623'>{{claims_amountJinEn}}</text>元&nbsp;,请选择免赔额承担方</span>
          </view>
          <view class="foot_item" style='margin-top: 20px;'>
            <button class="button2" style='border-radius: 23px;background: linear-gradient(180deg, #76D904 0%, #417505 100%);color: #fff;' @click="getAddTianJia">确认添加</button>
          </view>
    </view>
	<u-modal @confirm='queryBtn' confirm-text="前往列表" :zoom='false' v-model="modelShow" :show-title='false' :show-cancel-button='false'
	 confirm-color="#58a004">
		<view class="u-p-t-30 u-p-l-50  u-font-28" style='font-size: 18px;padding: 18px 0 10px !important;text-align: center;'>
			提示
		</view>
		<view class="u-p-t-20 u-p-b-30 u-p-l-50  u-font-28" style='text-align: center;'>
			{{modelContent}}
		</view>
	</u-modal>
  </view>
</template>

<script>

export default {
  data() {
	  const currentDate = this.getDate({
		format: true
	  })
    return {
		modelShow: false,
		modelContent: null,
		claims_amount: '0.00',
		type: 1,
		index: 0,
		isActive: 0,  //0.申请理赔   1.业主业主核对信息    2.待确认
      ruleForm: {
        renType: null,
      },
      indexList: true,
      pageIndex: 1,
      clapListData: [],//获取小区
      clapListDatatow: [],//获取全部
      orgIDCh: null,
      claims_amountJinEn: 0,
      userSex: null,
      org_id: null,
      loading: false,
      // type: 1,
      nextPage: false,
      listData: [],
      addlnsura: {
        ins_money:null,
        tr_money:null,
        ins_cer:null,
		taking_sides: null,
		claims_type: null, // 理赔类型
		ins_name:null, // 理赔名称
        event_time:null, // 事件时间
      },
      indexYingHa:0,// 费用承担方键值
      yingHangLei:[{yingHang_id:0,yingHang_name:"请选择"},
        {yingHang_id:1,yingHang_name:'物业公司'},
		{yingHang_id:2,yingHang_name:'业主本人'}
      ],
      indexss:0, //理赔类型
      lnsTest:[{lnsTest_id:0, lnsTest_name:"请选择理赔类型"},
		{lnsTest_id:1,lnsTest_name:'车辆理赔'},
		{lnsTest_id:2,lnsTest_name:'高空抛物'},
		{lnsTest_id:3,lnsTest_name:'漏水漏电'},
		{lnsTest_id:4,lnsTest_name:'设备设施'},
		{lnsTest_id:5,lnsTest_name:'交通事故'},
		{lnsTest_id:6,lnsTest_name:'人身意外'},
		{lnsTest_id:7,lnsTest_name:'工伤理赔'},
		{lnsTest_id:8,lnsTest_name:'盗窃理赔'},
	   ],//单位
	   date: currentDate,
    }
  },
  //不清清楚是啥，时间用的
  computed: {
    startDate() {
      return this.getDate('start');
    },
    endDate() {
      return this.getDate('end');
    }
  },
  onShow() {
    let _this = this
    if (uni.getStorageSync('phone')) {
      if (uni.getStorageSync('loginFlag')) {
        if (!uni.getStorageSync('hourseList')) {
          // uni.showModal({
          //   title: '请先进行业主认证',
          //   showCancel: false,
          //   confirmText: '确认',
          //   confirmColor: '#F9A832',
          //   success: function (res) {
          //     if (res.confirm) {
          //       _this.$Router.push({
          //         path: '/pages/address/address'
          //       })
          //     }
          //   }
          // });
		  this.$openInvite()
        } else {
          _this.showFlag = true
          _this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
		  _this.selectOrg(_this.homelist.proId);//这个获取公司人员
          _this.name = _this.homelist.proName;
          _this.address = _this.homelist.buildDistrictCode + '-' + _this.homelist.buildTowerCode + '-' + _this.homelist.roomUnitNumber + '-' + _this.homelist.roomCode
          _this.cselectOrg(this.homelist.proId);
        }
      } else {
        uni.showModal({
          title: '请先实名认证',
          showCancel: false,
          confirmText: '确认',
          confirmColor: '#F9A832',
          success: function (res) {
            if (res.confirm) {
              _this.$Router.push({
                path: '/pages/realName/realName'
              })
            }
          }
        });
      }
    } else {
      uni.showModal({
        title: '请先登录',
        showCancel: false,
        confirmText: '确认',
        confirmColor: '#F9A832',
        success: function (res) {
          if (res.confirm) {
            console.log('a')
            _this.$Router.pushTab({
              path: '/pages/user/user'
            })
          }
        }
      });
    }
  },
  methods: {
    cselectOrg(pro_id){
      this.$request.api.getNeed({
        type:1,
        project_id:pro_id,
      }).then(res => {
        this.org_id=res.data.data.org_id
      })
    },
	handleMoney(){
		console.log(parseFloat(this.addlnsura.tr_money),"-------------gvbhnjmkl,",parseFloat(this.claims_amountJinEn))
		if (parseFloat(this.addlnsura.tr_money) < parseFloat(this.claims_amountJinEn)) {
			this.addlnsura.taking_sides = '1';
			this.indexYingHa = 1;
			//
		} else {
			this.addlnsura.taking_sides = null;
			this.indexYingHa = 0;
			//this.addlnsura.tr_money = '';
		}
		if (parseFloat(this.addlnsura.tr_money)==0){
			this.addlnsura.tr_money = '';
		}
	},
    natov(url) {
      uni.navigateTo({
        url: url
      })
    },
    navTo(url, item) {
      let items = encodeURIComponent(JSON.stringify(item))
      uni.navigateTo({
        url: url + '?item=' + items
      });
    },
    // 选择理赔类型结果
    handlerCompany(l){
      this.indexss = l.target.value
      this.addlnsura.claims_type = this.lnsTest[this.indexss].lnsTest_id
    },
    //选择费用承担方结果
    bindPickerChange(r){
      this.indexYingHa = r.target.value
      this.addlnsura.taking_sides = this.yingHangLei[this.indexYingHa].yingHang_id
    },
	// 选择事件时间结果
    bindDateChange: function(e) {
      this.addlnsura.event_time = e.detail.value;
    },
	// 获取免额金额
    selectOrg(pro_id){
	  let res = this.$request.api.insuraMianPei({
		pageIndex:1,
		pro_id : Number(this.homelist.proId),
	  }).then(res => {
		  if (res.data.code == 0) {
			this.claims_amountJinEn = res.data.data.claims_amount;
		  } else {
			this.claims_amountJinEn = 0;
		  }
	  })
    },
    // 申请确认添加按钮
    getAddTianJia(){
		if (this.addlnsura.ins_name == null) {  // 理赔名称
			uni.showToast({
			  title: '理赔名称不能为空',
			  duration: 2000,
			  icon: 'none'
			});
			return;
		}
		if (this.addlnsura.claims_type == null) {  // 理赔类型
			uni.showToast({
			  title: '未选择理赔类型',
			  duration: 2000,
			  icon: 'none'
			});
			return;
		}
		if (this.addlnsura.event_time == null) {  // 事件时间
			uni.showToast({
			  title: '未选择事件时间',
			  duration: 2000,
			  icon: 'none'
			});
			return;
		}
		if (this.addlnsura.tr_money == null || this.addlnsura.tr_money ==0) {  // 要求金额
			uni.showToast({
			  title: '请填写正确的金额',
			  duration: 2000,
			  icon: 'none'
			});
			return;
		}
		if (this.addlnsura.ins_cer == null) {  // 理赔原因
			uni.showToast({
			  title: '理赔原因不能为空',
			  duration: 2000,
			  icon: 'none'
			});
			return;
		}
		if (this.addlnsura.taking_sides == null) {  // 承担方
			uni.showToast({
			  title: '未选择承担方',
			  duration: 2000,
			  icon: 'none'
			});
			return;
		}
	  let params = {
		  ins_name: this.addlnsura.ins_name, // 名称
		  claims_type: this.addlnsura.claims_type, // 类型
		  event_time: this.addlnsura.event_time, // 时间
		  ins_money: this.addlnsura.ins_money, // 保险金额
		  tr_money: this.addlnsura.tr_money, // 要求金额
		  ins_cer: this.addlnsura.ins_cer, // 理赔原因
		  taking_sides: this.addlnsura.taking_sides, // 承担方
		  ry_tell: this.homelist.ownerTel, //电话
		  ry_name: this.homelist.ownerName, //姓名
		  user_id:this.homelist.ownerUserId,//房间号user_id
		  room_id:this.homelist.roomId,//这个直接那个room_id
		  pro_id: this.homelist.proId,//直接掉用业主项目
		  district :this.homelist.buildDistrictCode,
		  floor :this.homelist.buildTowerCode,
		  unit :this.homelist.roomUnitNumber,
		  house_number :this.homelist.roomCode,
		  claimee_type:1,//默认业主
		  org_id: this.org_id,
	  }
      this.$request.api.insuraAdd(params).then(res => {
		  console.log(res)
        if (res.data.code==0){
			this.modelShow = true;
			this.modelContent = '恭喜您，已成功发起理赔申请'
        }
      })
    },
	queryBtn(){
		this.modelShow = false;
		this.resetForm();
		uni.navigateTo({
		  url: '/pages/yeInsurance/indexlnsurance'
		})
	},
	resetForm() {
		this.addlnsura.ins_name = null;// 名称
		this.addlnsura.claims_type = null;// 类型
		this.indexss = 0;
		this.addlnsura.event_time = null; // 时间
		this.addlnsura.ins_money = null; // 保险金额
		this.addlnsura.tr_money = null; // 要求金额
		this.addlnsura.ins_cer = null; // 理赔原因
		this.addlnsura.taking_sides = null; // 承担方
		this.indexYingHa = 0;
	},
	//日期
	getDate(type) {
	  const date = new Date();
	  let year = date.getFullYear();
	  let month = date.getMonth() + 1;
	  let day = date.getDate();
	
	  if (type === 'start') {
	    year = year - 60;
	  } else if (type === 'end') {
	    year = year + 2;
	  }
	  month = month > 9 ? month : '0' + month;
	  day = day > 9 ? day : '0' + day;
	  return `${year}-${month}-${day}`;
	}
  },
}
</script>


<style lang="scss">
.img_sex{
  width: 20px;
  height: 20px;
  position: absolute;
  // top: 85px;
  left: 51px;
  z-index: 10;
}
.ziTiYangShi{
  margin-left: 11px !important;
}
.repair-wrap {
  width: 100%;
  min-height: 100vh;
  height: auto;
  background: #f4f4f4;
  overflow: hidden;

  .repair-box {
    background: #fff;

    .repair-titel {
      height: 44rpx;
      line-height: 44rpx;

      .repair-titel-l {
        float: left;
      }

      .repair-titel-r {
        float: right;
        color: #999;
      }
    }

    .repair-6 {
      color: #666;
    }
  }
}
.clap_box{
  width: 89%;
  margin: 0 auto;
}
.clap_box_img{
  width: 100%;
  margin-top: 24px;
}
.guar-text textarea {
  border-radius: 8px;
  // width: 345px;
  height: 120px;
  background: #F2F3F5;
  // padding: 16rpx 20rpx !important;
  box-sizing: border-box;
}
.clap_box_imgtow{
  position: absolute;
  top: 102px;
  right: 175px;
  width: 50px;
}
.tab_nav{
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 100%;
  z-index: 10;
  top: 45px;
}
.tab_nav  .navTitle {
  height: 90rpx;
  line-height: 90rpx;
  width: 100%;
  text-align: center;
  font-size: 32rpx;
  font-family: Alibaba PuHuiTi;
  color: #333;
}
.active {
  position: relative;
  color: #447A05 ;
}
.active::after {
  content: "";
  position: absolute;
  width: 100rpx;
  height: 4rpx;
  background-color:#447A05 ;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
}
.button{
  width: 30%;
  border-radius: 33px;
  line-height: 26px;
  border: 1px solid #CCCCCC;
  font-size: 14px;
}
.button1{
  width: 22%;
  border-radius: 33px;
  line-height: 26px;
  border: 1px solid #CCCCCC;
  font-size: 14px;
}
.button:hover{
  border: 1px solid #F9A832;
  color: #FFFFFF;
  background-color: #F9A832;
}
.header-li {
  display: flex;
  // align-items: center;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  line-height: 102rpx;
  color: #333333;
  border-bottom: 1rpx solid #EEEEEE;
}

.header-name {
  width: 186rpx;
}
.form-select {
  width: 480rpx;
  background: url(../../static/image/right.png) no-repeat center right;
  background-size: 10rpx 17rpx;
}
.yilingqu {
  width: 80%;
  height: 84rpx;
  // background: #F9A832;
  border-radius: 44rpx;
  line-height: 84rpx;
  color: #FFFFFF;
  text-align: center;
  font-size: 32rpx;
  background: linear-gradient(180deg, #76D904 0%, #417505 100%);
}
.list-img {
  width: 50px;
  height: 50px;
  // border-radius: 50%;
}
.named {
  display: flex;
  font-size: 30rpx;
  color: #333333;
  line-height: 40rpx;
}
.title {
  font-size: 26rpx;
  color: #999999;
  width: 400rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 10px;
}
.button_btn{
  width: 29%;
  border-radius: 33px;
  line-height: 26px;
  border: 1px solid #CCCCCC;
  font-size: 14px;
  margin-left: 2px;
}
.follow{
  height: 26px;
  line-height: 25px;
  text-align: center;
  padding: 0px 15px;
  border-radius: 16px;
  font-size: 11px;
  border: 1px solid #ffffff;
  float: right;
  background: linear-gradient(to bottom, #c3e69b99,#00aa008f);
}
.complete{
  padding: 0 20rpx;
  display: flex;
  text-align: center;
  font-size: 26rpx;
}
.complete_chu{
  // width: 180rpx;
  // height: 60rpx;
  background-color: rgba(249,168,50,0.2);
  // background-color: rgba(69, 124, 5, 0.1);
  // margin: 30rpx 10rpx;
  line-height: 56rpx;
  border-radius: 54rpx;
  position: relative;
}
.complete_chu1{
  // width: 180rpx;
  height: 60rpx;
  // background-color: rgba(249,168,50,0.2);
  background-color: rgba(69, 124, 5, 0.1);
  margin: 30rpx 10rpx;
  line-height: 60rpx;
  border-radius: 54rpx;
  position: relative;
}
.complete_chuImg{
  width: 30rpx;
  height: 30rpx;
  margin-top: 8px
  // position: absolute;
  // top: 7px;
  // left: 30rpx;
}
.complete_chuTxt{
  margin-left: 35rpx;
}
.complete_yi{
  width: 180rpx;
  height: 80rpx;
  background-color: #33F9A832;
  margin: 30rpx 10rpx;
  line-height: 80rpx;
  border-radius: 54rpx;
  position: relative;
}
.complete_chuImg{
  width: 30rpx;
  height: 30rpx;
  // position: absolute;
  // top: 25rpx;
  // left: 30rpx;
  margin-top: 8px;
}
.complete_chuTxt{
  margin-left: 6px;
}
.complete_dian{
  margin-left:160rpx;
  line-height: 140rpx;
  color: #999;
  letter-spacing: 3rpx;
}
//增加描述输入框

.header-form{
  background: #FFFFFF;
  .header-li{
    // padding:0 45rpx;
    display: flex;
    // align-items: center;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 400;
    line-height: 95rpx;
    color: #333333;
    border-bottom:1rpx solid #EEEEEE;
    .header-name{
      width: 150rpx;
    }
    .text-area{
      width: 310rpx;
      padding-top: 26rpx;
      height: 60rpx;
    }
  }
}
.guar-text textarea {
  border-radius: 8px;
  // width: 345px;
  height: 200rpx;
  background: #F2F3F5;
  padding: 16rpx 20rpx !important;
  box-sizing: border-box;
  // border: 1px solid #999;
  width: 340px;
}

.repair-box {
  background: #fff;

  .repair-titel {
    height: 44rpx;
    line-height: 44rpx;

    .repair-titel-l {
      float: left;
    }

    .repair-titel-r {
      float: right;
      color: #999;
    }
  }

  .repair-6 {
    color: #666;
  }
}

//字体排序样式
.box2 {
  width: 345px;
  height: 20px;
  margin: 10px 0 0 15px;
}


.layer2 {
  width: 345px;
  height: 22px;
  margin: 20px 0 0 15px;
}

.txt2 {
  width: 65px;
  height: 22px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 16px;
  letter-spacing: 0.19200000166893005px;
  font-family: PingFangSC-Medium;
  white-space: nowrap;
  line-height: 22px;
  text-align: left;
}
.word3 {
  width: 43px;
  height: 20px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(249, 173, 62, 1);
  font-size: 14px;
  letter-spacing: 0.25200000405311584px;
  font-family: PingFangSC-Medium;
  white-space: nowrap;
  line-height: 20px;
  text-align: right;
}


.info2 {
  width: 29px;
  height: 20px;
  display: block;
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 14px;
  letter-spacing: 0.25200000405311584px;
  font-family: PingFangSC-Medium;
  white-space: nowrap;
  line-height: 20px;
  text-align: left;
}


//时间
.form-data {
  background: #ffffff;
  border-bottom: 1rpx solid #eeeeee;
  .form-cont {
    margin: 0 36rpx;
    box-sizing: border-box;
    // background: #FFFFFF;
    display: flex;
    align-items: center;
    // justify-content: space-between;
    height: 102rpx;
    font-size: 28rpx;
    color: #333333;
    .title {
      color: #333333;
      font-weight: bold;
      width: 170rpx;
    }
    .input {
      width: 400rpx;
      text-align: left;
      line-height: 200%;
      .tab-type {
        width: 254rpx;
        height: 64rpx;
        border-radius: 6rpx 0rpx 0rpx 6rpx;
        border: 2rpx solid #578ef0;
        display: flex;
        align-items: center;
        justify-content: center;
        .shi {
          width: 126rpx;
          height: 60rpx;
          background: #4a90e2;
          text-align: center;
          line-height: 60rpx;
          color: #ffffff;
        }
        .fou {
          width: 126rpx;
          height: 60rpx;
          background: #ffffff;
          text-align: center;
          line-height: 60rpx;
          color: #4a90e2;
        }
      }
    }
  }
}





</style>
